@extends('layouts.app')
@section('content')
    <div class="breadcrumbs ace-save-state" id="breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <i class="ace-icon fa fa-users"></i>
                <a href="{{url('user')}}">管理员管理</a>
            </li>
            <li class="active">管理员列表</li>
        </ul><!-- /.breadcrumb -->
    </div>
    <div class="page-content" id="content">
        <div class="page-header">
            <h1>
                管理员列表
                <small>
                    <i class="ace-icon fa fa-angle-double-right"></i>
                    后台管理登录用户
                </small>
            </h1>
        </div><!-- /.page-header -->
        <div class="row">
            <div class="col-md-12">
                <a href="{{url('user/add')}}" class="btn btn-info"><i class="ace-icon fa fa-plus-circle"></i> 添加管理员</a>
            </div>
            <div class="col-md-12">
                <template>
                    <el-table
                            :data="tableData"
                            style="width: 100%">
                        <el-table-column
                                prop="id"
                                label="ID"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="username"
                                label="登录账号"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="nickname"
                                label="昵称">
                        </el-table-column>
                        <el-table-column
                                prop="role"
                                label="角色">
                        </el-table-column>
                        <el-table-column
                                prop="created_at"
                                label="添加时间">
                        </el-table-column>
                        <el-table-column
                                prop="last_login"
                                label="最近登录">
                        </el-table-column>
                        <el-table-column
                                prop="is_del"
                                label="状态"
                                width="100"
                                :filters="[{ text: '启用', value: 0 }, { text: '禁用', value: 1 }]"
                                :filter-method="filterTag"
                                filter-placement="bottom-end">
                            <template slot-scope="scope">
                                <el-tag
                                        :type="scope.row.is_del === 1 ? 'danger' : 'success'"
                                        disable-transitions>@{{scope.row.is_del_label}}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑
                                </el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">设置状态
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <el-pagination
                        class="pull-right"
                        background
                        @current-change="handleCurrentChange"
                        :current-page.sync="current_page"
                        :page-size="per_page"
                        layout="total, prev, pager, next"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script type="text/javascript">
        const app = new Vue({
            el: '#content',
            data: {
                total: 0,
                per_page: 15,
                current_page: 1,
                tableData: []
            },
            created() {
                this.getList();
            },
            methods: {
                getList() {
                    const me = this;
                    $.post("{{url('user')}}", {page: this.current_page}, function (res) {
                        console.log(res);
                        if (res.state === 'success') {
                            me.tableData = res.data;
                            me.total = res.meta.total;
                            me.per_page = res.meta.per_page;
                        }
                    })
                },
                handleEdit(index, row) {
                    console.log(index, row);
                    window.location.href = "user/edit/"+row.id
                },
                handleDelete(index, row) {
                    if (row.id === 1) {
                        this.$message.error('超级管理员不能禁用!')
                    } else {
                        const me = this;
                        const msg = row.is_del === 0 ? '禁用后,该用户将无法登录管理后台,是否继续?' : '启用后,该用户将可以正常登录管理后台,是否继续?';
                        this.$confirm(msg, '操作提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            $.post("{{route('setUserIsDel')}}", {id: row.id,is_del: row.is_del}, function (res) {
                                if (res.state === 'success') {
                                    me.$message.success(res.message);
                                    me.getList()
                                }else{
                                    me.$message.error(res.message)
                                }
                            })
                        }).catch(() => {})
                    }
                },
                filterTag(value, row) {
                    return row.is_del === value;
                },
                handleCurrentChange(val) {
                    this.current_page = val;
                    this.getList();
                    console.log(`当前页: ${val}`);
                }
            }
        })
    </script>
@endsection